<template>
	<div class="recharge-page">
		<div class="nav-back" @click="goBack">
            <i class="el-icon-arrow-left"></i>
        </div>
		<div class="recharge-box">
            <div>
                <el-row :gutter="20">
                    <el-col :span="3">
                        <h5 class="fs-18">购买积分：</h5>
                    </el-col>
                    <el-col :span="17">
                        <div class="flex f-mi marg-B2">
                            <div style="width: 82%;">
                                <el-input clearable v-model="numInput" placeholder="请输入积分数量" @input="integralInput"></el-input>
                            </div>
                            <span class="marg-L1 fs-16">积分</span>
                            <div class="marg-L1 fs-16">
                                <span style="color:#FF711A;">{{money}}</span>
                                <span>元</span>
                            </div>
                        </div>
                        <div class="flex btn-list">
                            <div class="items" v-for="(item,index) in listData" :key="index" :class="activeIndex == index ? 'active':'' " @click="itemClick(item,index)">
                                <span class="fs-18">{{item}}</span>
                                <span>积分</span>
                            </div>
                        </div>
                        <div class="marg-T1">
                            <p style="color:#FF5733;">*充值积分的比例为1:1，1元钱1个积分。</p>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-button class="reac-btn gray" type="primary" @click="handleBuy">充值</el-button>
                    </el-col>
                </el-row>
            </div>
		</div>
        <div class="recharge-list marg-T2">
            <div class="content pad-T3 pad-B3">
                <h5 class="fs-18 marg-B2">优惠活动：</h5>
                <el-table :data="tableData" :header-cell-style="headerStyle" style="width: 100%">
                    <el-table-column prop="money" label="充值金额" :align="center">
                    </el-table-column>
                    <el-table-column prop="point" label="送积分" :align="center">
                    </el-table-column>
                    <el-table-column prop="getPoint" label="到账积分" :align="center">
                    </el-table-column>
                    <el-table-column prop="discount" label="相当于折扣" :align="center">
                    </el-table-column>
                    <el-table-column prop="timeDate" label="有效期" :align="center">
                    </el-table-column>
                    <el-table-column prop="oprate" label="操作" :align="center">
                        <template slot-scope="scope">
                            <el-button class="buy-btn" @click="viewClick(scope.row)" size="small">购买</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <payDailog :isTrans="isTrans"/>
	</div>
</template>

<script>
	import mixin from '@/assets/js/mixin'
    import payDailog from './payDailog'
	export default {
		mixins: [mixin],
        components: {
            payDailog
        },
        data() {
            return {
                numInput: '',
                activeIndex: null,
                listData: [100,200,300,500,1000],
                tableData: [{
                    money: '1000元',
                    point: 0,
                    getPoint: '1000分',
                    discount: '0折',
                    timeDate: '365天'
                },{
                    money: '3000元',
                    point: 300,
                    getPoint: '1300分',
                    discount: '9折',
                    timeDate: '365天'
                },{
                    money: '5000元',
                    point: 1000,
                    getPoint: '1000分',
                    discount: '8折',
                    timeDate: '365天'
                }],
                headerStyle: {
                    background: '#FFEEDE',
                    color: '#FF711A'
                },
                isTrans: false,
                money: 0,
                center: 'center'
            }
        },
        methods: {
            handleBuy() {
                this.isTrans = true
            },
            integralInput(val) {
                this.money = val
            },
            itemClick(item,index) {
                this.activeIndex = index
                this.numInput = item
                this.money = item
            }
        }
	}
</script>

<style lang="less" scoped>
	.recharge-page{
		width: 100%;
		// height: 100vh;
		padding: 30px;
		border-radius: 8px;
		background: #fff;
		.recharge-box{
			width: 80%;
			margin: 0 auto;
            .reac-btn{
                width: 84px;
                height: 40px;
                border: none;
                color: #fff;
                border-radius: 6px;
                background: rgba(166, 166, 166, 1);
            }
            .cs-bg{
                background-color: #FF8D1A;
            }
            .btn-list{
                .items{
                    cursor: pointer;
                    width: 100px;
                    height: 38px;
                    margin-right: 10px;
                    text-align: center;
                    line-height: 38px;
                    color: #383838;
                    border-radius: 4px;
                    background: rgba(255, 255, 255, 1);
                    border: 1px solid rgba(229, 229, 229, 1);
                }
                .active{
                    color: #FF8D1A;
                    border-color: #FF8D1A;
                }
            }
			// p{
			// 	text-indent: 25px;
			// 	line-height: 30px;
			// }
		}
        .recharge-list{
            border-radius: 6px;
            background: rgba(255, 253, 247, 1);
            border: 1px solid rgba(255, 217, 179, 1);
            .content{
                width: 80%;
			    margin: 0 auto;
                .buy-btn{
                    color: #fff;
                    width: 67px;
                    height: 30px;
                    border-radius: 15px;
                    background: rgba(255, 113, 26, 1);
                }
            }
        }
	}
</style>